const TAU = Zdog.TAU;

let illo = new Zdog.Illustration({
  // 用id选择器设置画布
  element: '#zdog-canvas',
  zoom: 10,
  // dragRotate: true,
  resize:"fullscreen",
  // resize:true,
  // rotate:{
  //   x:-Zdog.TAU/16,
  //   y:-Zdog.TAU/16,
  // }
});


let hipX = 3;

let hips = new Zdog.Shape({
  addTo:illo,
  path:[{x:-hipX},{x:hipX}],
  stroke:4,
  color:'#636',
  rotate:{x:TAU/8}
})

let leg = new Zdog.Shape({
  addTo:hips,
  path:[{y:0},{y:12}],
  stroke:4,
  translate:{x:-hipX},
  color:'#636',
  rotate:{
    x:TAU/8
  }
})

let foot = new Zdog.RoundedRect({
  addTo:leg,
  color:'#c22',
  translate:{
    y:14,z:1
  },
  rotate:{
    x:Zdog.TAU/4
  }
  ,
  width:2,
  height:4,
  cornerRadius:1,
  fill:true,
  stroke:3
})

leg.copyGraph({
  translate:{x:hipX},
  rotate:{x:-TAU/8}
})

let chestX = 1.5;
let armOffset = 6.5;
let chest = new Zdog.Shape({
  addTo:hips,
  path:[{x:-chestX},{x:chestX}],
  stroke:10,
  translate:{y:-6.5},
  color:'#c22'
})

let upperArm = new Zdog.Shape({
  addTo:chest,
  translate:{x:armOffset,y:-2},
  path:[{y:0},{y:6}],
  color:'#636',
  stroke:4,
  rotate:{x:TAU/16},
})

let lowerArm = new Zdog.Shape({
  addTo:upperArm,
  translate:{y:6},
  path:[{y:0},{y:6}],
  color:'#ea0',
  stroke:4,
  rotate:{
    x:TAU/8,
  },
})

let hand  = new Zdog.Shape({
  addTo:lowerArm,
  translate:{y:6,z:1},
  color:'#ea7',
  stroke:6,
})
upperArm.copyGraph({
  translate:{x:-armOffset,y:-2},
  rotate:{x:-TAU/8}
})

let head = new Zdog.Shape({
  addTo: chest,
  stroke: 12,
  color: "#ea0",
  translate:{y:-10}
})

let eye = new Zdog.Ellipse({
  addTo:head,
  diameter:2,
  quarters:2,
  translate:{
    x:-2,y:1,z:4.5
  },
  stroke:0.5,
  rotate:{z:-Zdog.TAU/4},
  backface:false,
});
eye.copy({
  translate:{
    
    x:2,y:1,z:4.5
  }
})
let mouth = new Zdog.Ellipse({
  addTo:head,
  diameter:3,
  quarters:2,
  translate:{
    y:3,z:4
  },
  rotate:{z:Zdog.TAU/4},
  backface:false,
  color:"#fed",
  closed:true,
  fill:true
});


  ;
(function animate() {
  illo.updateRenderGraph();
  requestAnimationFrame(animate);
}
)();



window.onkeyup = function(e){
  let code = e.code;
  console.log(code);
  if(code == "Space"){
    illo.rotate.y+=0.1;
  }
}